<template>
<div>
<router-view></router-view>
    <div class="footer">			
        <ul>
            <li><router-link to="/index"><i class="i1"></i>首页</router-link></li>
            <li><router-link to="/type"><i class="i2"></i>分类</router-link></li>
            <li><router-link to="/search"><i class="i3"></i>搜索</router-link></li>
            <li><router-link to="/shopcar"><i class="i4"></i>购物车</router-link></li>
            <li><router-link to="/my"><i class="i5"></i>我的商城</router-link></li>
           </ul>
    </div>
</div>    
</template>
<script>
    export default{
        data(){
            return{
                
            }
        }
    }
</script>
<style>
    /* 这是脚部分内容 */
    .footer{
        width:100%;
        height: 50px;
        bottom: 0px;
        padding-top:5px;
        position: fixed;
        background: #E5E5E5;
        z-index:10;
    }
    .footer>ul>li{
        width: 20%;
        height: 100%;
        float: left;
        
        text-align: center;
    }
    .footer>ul>li a{
        text-decoration: none;
        color: gray;
        font-size:14px;

    }
    .footer>ul>li i{
        width: 22px;
        height:22px;        
       
        position:relative;
        left:50%;
        margin-left:-11px;
        display: block;        
        
    }
    .footer .i1{
        background:url('../../images/home.png') no-repeat;
         background-size: cover;
    }
    .footer .i2{
        background:url('../../images/list.png') no-repeat;
         background-size: cover;
    }
    .footer .i3{
        background:url('../../images/search.png') no-repeat;
         background-size: cover;
    }
    .footer .i4{
        background:url('../../images/car.png') no-repeat;
         background-size: cover;
    }
    .footer .i5{
        background:url('../../images/my.png') no-repeat;
        color:gray;
         background-size: cover;
    }
</style>
